<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title> - 实时曲线</title>
<link rel='stylesheet' href='/css1/style.css'>
<link th:href="@{/profile/imgs/favicon.ico}" rel="shortcut icon"/>
<script type='text/javascript' src='/libs/echarts.min.js'></script>
<script type='text/javascript' src='/libs/jquery-3.6.0.min.js'></script>
<script type='text/javascript' src='/libs/socket.js'></script>
<script type='text/javascript' src='/libs/reconnecting-websocket.js'></script>
<script type='text/javascript' src='/libs/charts_ld.js'></script>
<script type='text/javascript' src='/libs/utils.js'></script>
</head>
<style>
html, body {
	width: 100%;
	height: 100%;
}
</style>
<body>
	<div class='head clearfix'>
		<h1 class='pulll_left'><a onclick="relocate('/')">[[${name}]]</a></h1>
		<div class='menu menu2 pulll_left'>
			<ul>
				<!-- <li><a th:href="@{/realtime/index}">综合展示</a></li> -->
				<li><a onclick="setlocate('/realtime/washow','')">衡器监控</a></li>
				<li><a onclick="setlocate('/realtime/wacharts','')">实时曲线</a></li>
				<li><a onclick="setlocate('/realtime/wachartshis','')">历史曲线</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waalarmlist','')">告警列表</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waWorkOrderList')">工单列表</a></li>
			</ul>
		</div>
		<div class='time' id='showTime'>1970/01/01 00:00:00</div>
	</div>
	<div class='mainbox'>
		<ul class='clearfix nav1'>
			<li style='width: 100%'>
				<div class='box'>
					<div class='boxnav'>
						<table class='table1' width='60%' border='0' cellspacing='0'
							cellpadding='0'>
							<tbody>
								<tr>
									<td>名称</td>
									<td th:text='${waMap.waname }'></td>
									<!-- <td>安装位置</td>
									<td><span class='text-b'>东区北入口</span></td>
									<td>状态
									</th>
									<td>
										<div class='text-s'>正常</div>
									</td> -->
									<td>数据时间：</td>
									<td><span style="color: #FFF;" id="dataTime"></span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</li>

		</ul>
		<div th:each='config,stat:${waconfigList}' class='box'
			style='padding: 20px 0; width: 50%; float: left;'>
			<div th:attr="id=${'chartLdDiv'+stat.index}" id='chartLdDiv2'
				style='height: 290px;'></div>
		</div>
	</div>
	<script th:inline='javascript'>
	document.title = [[${name}]] + document.title;
  var host = [[${#httpServletRequest.getHeader("Host")}]]

  var waMap = [[${waMap}]]
  var waconfigList = [[${waconfigList}]]

  var wsUri = 'ws://' + host + '/womp_wa/'

  function onMessage(evt) {
    var jsonData = JSON.parse(evt.data)
        $("#dataTime").text(jsonData.message.time)
    if (jsonData && jsonData.message && jsonData.message.data) {
      // 实况数据
      if (jsonData.type == 1) {
        if (waMap && waconfigList.length) {
          for (let m = 0; m < waconfigList.length; m++) {
            let element = waconfigList[m]
            let data = getPointData(element, jsonData)
            //更新零点曲线
            let time = jsonData.message.time.substring(11)
            chartArr[m].setDynamicData(time, data.value)
          }
        }
      }
    }
  }

  function getPointData(element, jsonData) {
    // 数据
    for (var i = 0; i < jsonData.message.data.length; i++) {
      if (element.code == jsonData.message.data[i].code && jsonData.message.data[i].orderNum == element.order_num) {
        return jsonData.message.data[i]
      }
    }
  }

  initSocket(wsUri + waMap.wacode)

  var chartArr=[]
  for(var i=0;i<waconfigList.length;i++){
	  var element=waconfigList[i]
	  var dynamicChart = new DynamicChart('chartLdDiv'+i)
	  dynamicChart.initDynamicChart(element.elementname+(element.order_num),element.code,1)
	  
	  chartArr.push(dynamicChart)
  }

</script>
</body>
</html>
